<template>
  <div class="home">
    <v-header></v-header>
    <div class="tab">
      <router-link tag="div" :to="{path: '/goods'}" class="tab-item">Goods</router-link>
      <router-link tag="div" to="/seller" class="tab-item">Seller</router-link>
      <router-link tag="div" :to="{name: 'ratings'}" class="tab-item">Ratings</router-link>
    </div>
    <router-view></router-view>
    <router-view name="shopcart" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></router-view>
    <!-- <component :is="currentView"></component>
    <shopcart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart> -->
  </div>
</template>

<script>
// @ is an alias to /src
import VHeader from '_c/header'
import VGoods from '_c/goods'
import VRatings from '_c/Ratings'
import VSeller from '_c/Seller'
import shopcart from '_c/shopcart'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      index: 0,
      arr: ['VGoods','VSeller','VRatings']
    }
  },
  computed: {
    ...mapState(['goods', 'seller']),
    currentView () {
      return this.arr[this.index]
    }
  },
  // watch: {
  //   $route: {
  //     handler: function(val, oldVal){
  //       if (val.name === 'seller') this.index = 1
  //       else if (val.name === 'goods') this.index = 0
  //       else this.index = 2
  //     },
  //     // 深度观察监听
  //     deep: true
  //   }
  // },
  components: {
    VHeader,
    VGoods,
    shopcart,
    VRatings,
    VSeller
  },
  methods: {
    ...mapActions(['getGoodsInfos', 'getSellerInfos'])
  },
  mounted () {
    this.getGoodsInfos()
    this.getSellerInfos()
  }
}
</script>

<style lang="stylus" scoped>
.tab
  display flex
  width 100%
  line-height 40px
  .tab-item
    flex 1
    text-align center
    &.is-active
      color rgb(240, 20, 20)
</style>
